import React, {PureComponent} from 'react';
import {StyleSheet, View, Image} from 'react-native';
import Swiper from 'react-native-swiper';

export default class extends PureComponent {
    setCurrent = idx => {
        this.props.setCurrent(idx);
    };

    render() {
        const {itemList} = this.props;
        return (
            <View style={styles.container}>
                {
                    itemList.length > 0 ? <Swiper style={styles.wrapper}
                                                  loop={false}
                                                  showsPagination={false}
                                                  onIndexChanged={(idx) =>
                                                      this.setCurrent(idx)
                                                  }
                    >
                        {
                            itemList.map(item =>
                                <Image
                                    key={item}
                                    source={{uri: item.item_image}}
                                    style={styles.image}/>
                            )
                        }
                    </Swiper> : null
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    image: {
        width: '100%',
        height: '100%'
    }

});
